<template>
  <div>
    <el-form :model="dataDesc" label-width="100px">
      <el-form-item label="消息标题:">
        <div>
          {{ dataDesc.title }}
        </div>
      </el-form-item>
      <el-form-item label="消息内容:">
        <div>
          {{ dataDesc.content }}
        </div>
      </el-form-item>
      <el-form-item label="消息图片:">
        <el-image
          style="width: 100px; height: 100px"
          v-for="(imgItem, index) in dataDesc.siteImgList"
          :key="index"
          :src="imgItem.imgUrl"
          :alt="imgItem.title"
          :preview-src-list="imgUrlList"
        >
        </el-image>
      </el-form-item>
      <el-form-item label="查看详情:">
         
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    dataDesc: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      imgUrlList: [],
    }
  },
  created() {
    this.dataDesc.siteImgList.forEach(v => this.imgUrlList.push(v.imgUrl))
  },
}
</script>

<style lang="less" scoped>
.el-form {
  padding: 20px;
}
.el-image {
  padding: 5px;
  margin: 5px;
  border: 1px solid @lineColor;
  border-radius: 3px;
}
</style>
